<template>
    <div>
<el-container>
  <el-header>
    <div class="tou1">
    <img class="img1" src="../assets/huanhuan.png" alt="">
    <p class="p1">我的后台管理</p>
    </div>
  </el-header>
  <!-- 这个是左侧导航 -->
  <el-container class="contai">
    <el-aside width="200px">
       <el-col :span="24">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgb(149, 159, 167)"
      text-color="#fff"
      active-text-color="#ffd04b">
      <router-link to="a1">
    <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      </router-link>
       <router-link to="a2">
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">项目添加</span>
      </el-menu-item>
       </router-link>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">项目删除</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">我的</span>
      </el-menu-item>
    </el-menu>
  </el-col>
    </el-aside>
    <!-- 这个是右文 -->
    
    <el-main>
<div class="you1">
  <router-view></router-view>
</div>
    </el-main>
  </el-container>
</el-container>
    </div>
</template>
<script>
export default {
      data() {
        return {
        }
    },
    methods: {
       handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    // components:{
    //     MyOne
    // }
}
</script>
<style>
.tou1{
  display: flex;
  justify-content: space-between;
}
.img1{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 5px;
  float: left;
}
.p1{
  float: left;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
*{
  margin: 0;
  padding: 0;
}
  .el-header, .el-footer {
    background-color: rgb(84, 92, 100);
    color: #333;
    /* text-align: center; */
    /* line-height: 60px; */
  }
  
  .el-aside {
    background-color: rgb(149, 159, 167);
    color: #333;
    /* text-align: center; */
    /* line-height: 103px; */
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    /* line-height: 653px; */
    height: 693px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
    /* margin-top: 20px; */
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
